<template>
    <div id="auth-zmxy">
        <div class="wrapper">
            <div class="logo">
                <img src="../images/logo_alipay.png">
                <img src="../images/logo_zhima.png">
            </div>
            <div class="input-zmxy">
                <input v-model='zmScore' type="tel" placeholder="输入我的芝麻信用分分值">
            </div>
            <div class="main">
                <div class="split"><span>或</span></div>
                <div class="title">提交支付宝账户信息</div>
            </div>
            <ul class="form-box">
                <li class="form__item">
                    <span class="form__key">支付宝账户名</span>
                    <div class="form__value">
                        <input v-model='zmAccountNumber' type="text" placeholder="请输入">
                    </div>
                </li>
                <li class="form__item" v-if='!phoneAccount'>
                    <span class="form__key">登录密码</span>
                    <div class="form__value">
                        <input v-model='zmPassword' type="text" placeholder="请输入">
                    </div>
                </li>
            </ul>
            <div class="confirm" @click='confirm' :class='{disabled:this.confirmDisabled}'>提 交</div>
            <p class="font-caption tips">信息已保密，请保持电话畅通以便我们核实信息</p>
        </div>
    </div>
</template>

<script>
    import { storageApi, authApi, reportApi } from '../api/api'
    import moment from 'moment'
    import { getBrowser, rules } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        components:{

        },
        data() {
            return {
                zmScore:'',
                zmAccountNumber:'',
                zmPassword:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
            ]),
            userInfo(){
                return this.localInfo.userInfo || {}
            },
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            phoneAccount(){
                if(rules.tel(this.zmAccountNumber)) return true
                return false
            },
            confirmDisabled(){
                if(this.zmScore === '' && this.zmAccountNumber === ''){
                    return true
                }
                if(this.zmScore === '' && !this.phoneAccount && this.zmPassword === ''){
                    return true
                }
                return false
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setLoanInUseForm',
                'setAuthIdImgs',
                'setUserInfo'
            ]),

            // function
            goRouter(code){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search
                let realUrl = `${protocol}//${host}${pathname}${search}#auth`
                let name = 'auth'

                if(code == 'personal') name = 'info-base'
                if(code == 'zhima') {
                    this.showLoading()
                    authApi.zhimaAuthUrl({
                        callBackUrl:realUrl
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'mobile') {
                    this.showLoading()
                    reportApi.carrier51gjj({
                        returnUrl:realUrl
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result.url
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'bankcard') name = 'add-bankcard'
                this.$router.replace({
                    name:name,
                })
            },
            confirm(){
                let params = {
                    zmScore:this.zmScore,
                    zmAccountNumber:this.zmAccountNumber,
                    zmPassword:this.zmPassword
                }
                if(params.zmScore === '' && params.zmAccountNumber === ''){
                    this.setMsgTip({
                        text:'请填写芝麻信用评分或支付宝信息',
                        type:'warn'
                    })
                    return
                }
                if(params.zmScore === '' && !this.phoneAccount && this.zmPassword === ''){
                    this.setMsgTip({
                        text:'请填写登录密码',
                        type:'warn'
                    })
                    return
                }

                this.showLoading()
                authApi.zhimaAuthMANUAL(params)
                .then(result=>{
                    this.hideLoading()
                    this.setMsgTip({
                        text:'提交芝麻信用成功！',
                        type:'success'
                    })

                    this.goRouter(result)
                })
                .catch(error=>{
                    console.error(error)
                    this.hideLoading()
                })

            },
        },
        created(){
            this.zmAccountNumber = this.userInfo.userPhone
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/animate";
    @import "../sass/mixins";
    #auth-zmxy{
        .logo{
            padding: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
                display: block;
                width: 45%;
                flex:1;
                margin-left:16px;
                &:first-child{
                    margin-left: 0;
                }
            }
        }
        .form__key{
            padding: 15px;
        }
        .form__value input{
            padding: 15px;
        }
        .input-zmxy{
            background-color: #fff;
            input{
                font-size: 24px;
                font-weight: 300;
                line-height: 36px;
                display: block;
                width: 100%;
                box-sizing:border-box;
                padding: 18px 48px;
            }
        }
        .main{

        }
        .title{
            @extend %font-body2;
            text-align: center;
            color:$importColor;
            padding-bottom: 16px;
        }
        .split{
            display: flex;
            justify-content: center;
            position: relative;
            padding: 24px 0;
            margin: 0 16px;
            span{
                display: block;
                position: relative;
                z-index:2;
                padding: 0 16px;
                background-color: $backgroundColor;
            }
            &:after{
                content:'';
                @extend %font-body1;
                border-top: 1px solid $sectionColor;
                position: absolute;
                top:50%;
                left:0;
                right: 0;
            }
        }
        .confirm{
            margin:30px 16px 14px 16px;
            border-radius:2px;
            box-shadow:0 2px 2px 0 rgba(0,0,0,.12);
            background-color: #07C7B2;
            color:#fff;
            padding: 10px;
            text-align: center;
            &.disabled{
                background-color: $disabledColor;
            }
        }
        .tips{
            text-align: center;
        }
    }

</style>
